<template>
	<view class="repair-wrap">
		<viewData :type="'noData'" :nextPage="nextPage" :isTab="false" :isData="repairList.length < 1"
			:loading="loading" @onRefresh="onRefresh" :noDatatext="noDatatext" @scrolltoupper='scrolltoupper'>
			<view style="padding: 0 20rpx;" class="cardCon" v-for="(item,index) in repairList" :key='index'>
				<view @click="toDetails(item.id)" class="u-m-t-20 repair-box u-p-30 rounded-2 shadow">

					<view class="list-li">
						<view class="list-cont" style="display: flex;">
							<image style="width: 19px;height: 19px;margin-top: 5px;"
								src="../../static/image/repairList.png" alt=""></image>
							<span style="font-size: 17px;font-weight: 700;flex: 1;"
								class="list-text">{{ item.address }}的报修申请</span>
						</view>
						<view style="margin-top: -20px;justify-content: flex-end;">
							<view class="notice-typePu" v-if="item.repairs_status == 1">客服待接单</view>
							<view class="notice-typePu" v-if="item.repairs_status == 2">客服待派单</view>
							<view class="notice-typePu" v-if="item.repairs_status == 3">维修待接单</view>
							<view class="notice-typePu" v-if="item.repairs_status == 4">维修待维修</view>
							<view class="notice-typeBlue" v-if="item.repairs_status == 5">维修中</view>
							<view class="notice-typePu" v-if="item.repairs_status == 6&&item.money_state == 1">待缴
							</view>
							<view class="notice-typePuTong" v-if="item.repairs_status == 6&&item.money_state == 2">
								已缴
							</view>
							<view class="notice-typePuTong" v-if="item.repairs_status == 6&&item.money_state == 3">
								免单
							</view>
							<view class="notice-type" v-if="item.repairs_status == 7">客服取消工单</view>
							<view class="notice-type" v-if="item.repairs_status == 8">业主取消工单</view>
						</view>
					</view>

					<view class="list-li">
						<view class="list-cont">
							业主姓名：
							<text class="list-text">{{ item.repairs_name }}</text>
						</view>
						<view class="list-right">
							报修分类：
							<text class="list-text">{{ item.subjectName }}</text>
						</view>
					</view>

					<view class="list-li">
						<view class="list-cont"
							v-if="item.repairs_status == 1 || item.repairs_status == 2 || item.repairs_status == 3">
							报修时间：
							<text class="list-text">
								{{item.repairs_create_time}}
							</text>
						</view>
						<view class="list-cont" v-else>
							维修人：
							<text class="list-text">
								{{item.ordersInfo?item.ordersInfo.user_name:''}}
							</text>
						</view>
					</view>

					<view class="list-li">
						<view class="list-cont" v-if="item.repairs_status == 1">
							待接单剩余时间：
							<text :style="item.receiveSurplus=='0分钟'?'color: red':''"
								class="list-text">{{ item.receiveSurplus }}</text>
						</view>
						<view class="list-cont" v-if="item.repairs_status == 2">
							接单时间：
							<text class="list-text">{{ item.orderRecord.create_time }}</text>
						</view>
						<view class="list-cont" v-if="item.repairs_status == 3">
							员工接单剩余时间：
							<text :style="item.ordersInfo?item.ordersInfo.surplusTime=='0分钟'?'color: red':'':''"
								class="list-text">{{ item.ordersInfo?item.ordersInfo.surplusTime:'' }}</text>
						</view>
						<view class="list-cont" v-if="item.repairs_status == 4">
							上门剩余时间：
							<text :style="item.ordersInfo?item.ordersInfo.surplusTime=='0分钟'?'color: red':'':''"
								class="list-text">{{ item.ordersInfo?item.ordersInfo.surplusTime:'' }}</text>
						</view>
						<view class="list-cont" v-if="item.repairs_status == 5">
							开始时间：
							<text class="list-text">{{ item.ordersInfo?item.ordersInfo.begin_time:'' }}</text>
						</view>
						<view class="list-cont" v-if="item.repairs_status == 6">
							结束时间：
							<text class="list-text">{{ item.ordersInfo?item.ordersInfo.end_time:'' }}</text>
						</view>

						<view class="list-right">
							工单号：
							<text class="list-text">{{ item.repairs_code }}</text>
						</view>
					</view>

				</view>
			</view>

			<view v-if='repairList.length == 0'>
				<view style="width: 232px;height: 242px;margin: 110px auto;">
					<image style="width: 100%;height: 100%;"
						src="../../static/image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
				</view>
				<!-- <view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无报修数据</view> -->
			</view>

		</viewData>




		<view>
			<image class="add-process" src="../../static/image/tenAddDatas.png"
				@click="navTo('/pages/guarantee/guarantee')"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairList: [{
					ordersInfo: {
						todoor_time: null,
						surplusTime: null,
						user_name: null,
					},

				}],
				homelist: {},
				loading: false,
				nextPage: false,
				pageIndex: 1,
				total: null, //总条数
				noDatatext: "暂无报修数据"
			}
		},
		onShow() {
			this.checkLogin()
		},
		onPullDownRefresh() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.getList()
		},

		methods: {
			scrolltoupper() {
				console.log('dsff')
				this.getList()
			},
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode

							this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							this.getList()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()

			},

			toDetails(val) {
				this.$Router.push({
					path: '/pages/repairDetails/repairDetails',
					query: {
						id: val
					}
				})
			},
			// 获取列表
			getList() {
				// if (this.pageIndex < 2) {
				uni.showLoading({
					title: '加载中'
				});
				// }
				this.loading = false;
				this.$request.api.zyRepairList({
					room_id: this.homelist.roomId,
					pro_id: this.homelist.proId,
					pageIndex: this.pageIndex
				}).then(res => {
					if (this.pageIndex == 1) {
						this.repairList = res.data.data.datalist || [];
					} else {
						this.repairList = [...this.repairList, ...res.data.data.datalist];
					}
					this.total = res.data.data.total
					if (res.data.data.datalist.length == 10) {
						this.nextPage = true;
					} else {
						this.nextPage = false;
					}

					this.loading = true;
					uni.hideLoading()

				})
				uni.stopPullDownRefresh();
			},
			//跳转页面
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// //刷新下拉
			onRefresh() {
				if (!this.nextPage) {
					this.pageIndex = this.pageIndex + 1;
					this.getList();
				}
			},
		},
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.add-process {
		width: 102rpx;
		height: 102rpx;
		position: fixed;
		right: 36rpx;
		bottom: 230rpx;
	}

	.list-li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.list-cont {
			text-align: left;
			color: #999999;
			flex-shrink:0;
			flex: 1;
		}

		.list-right {
			text-align: left;
			color: #999999;
		}

		.list-text {
			color: #333333;
			margin-left: 6rpx;
		}
	}

	.notice-typePu {
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
	}

	.notice-type {
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
	}

	.notice-typePuTong {
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
	}

	.notice-typeBlue {
		background: linear-gradient(90deg, #578ef094 0%, #3d7fff 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 0 20rpx;
	}

	.cardCon {
		padding: 13px;
		box-sizing: border-box;
		border-radius: 6px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28px;
	}
</style>